<template>
	<article class="kp-modifyPass" v-bind:style="{ height: pageHeight+'px' }">
		<div class="kp-mp-box">
			<div class="kp-mb-li mt-30">
				<input type="text" :placeholder="place" v-model="nickName" @input="nickNameNum" @click="nickFocus" autofocus/>
				<i v-show="is_false" @click.stop="reset"></i>
			</div>
			<p>
				<!--<span>注： 您输入的昵称已有人使用！</span>-->
				{{min}}/{{max}}</p>
		</div>
	</article>
</template>

<script>
	import { XInput, Group, XButton } from 'vux';
	import { mapGetters } from "vuex";
	export default {
		data() {
			return {
				nickName: '',
				min: '0',
				max: '12',
				pageHeight: '',
				is_false: false,
				place: '输入昵称', //
				con:true,
			}
		},
		mounted() { //载入后执行
			var h = document.documentElement.clientHeight || document.body.clientHeight;
			this.pageHeight = h;
			if(this.userinfo.nickName) {
				this.place = this.userinfo.nickName;
				this.min = this.userinfo.nickName.length;
			} else {
				this.place = "输入昵称";
				this.min = 0;
			}
			this.$root.eventHub.$on('nicketName', () => { //eventHub接收事件
				this.save();
			});
		},
		created() { //创建后

		},
		watch: { //监听放置
		},
		methods: { //方法放置
			reset() {
				this.nickName = '';
				this.is_false = false;
			},
			nickFocus() {
				if(this.con){
					if(this.userinfo.nickName) {
						this.nickName = this.userinfo.nickName;
						this.place = "输入昵称";
					}
					this.con = false;
				}
				
				this.is_false = true;
			},
			nickNameNum() {
				if(this.min < this.max) {
					this.min = this.nickName.length;
				} else {
					this.min = this.nickName.length - 1;
					this.nickName = this.nickName.substring(0, this.max)
				}
			},
			save() {
				//	    	(0 昵称 1 个性签名 2 实名认证 3 邮箱 4 性别)

				let param = {
					userID: this.userinfo.userID,
					nickName: this.nickName,
					type: "0"
				};
				let that = this;
				this.$http.post(this.$baseUrl.baseurl + "kpcx/appPersonalCenter/updateInfo", param).then((res) => {

					if(res.data.Code == 0) {
						var userinfo = res.data.Result.appuser;
						if(res.data.Result.appuser) {
							that.$store.commit('USERINFO', userinfo);
							if(res.data.Result.appuser.IDNo) {
								userinfo.realnamestatus = true;
								that.$store.commit('USERINFO', userinfo);
							} else {
								userinfo.realnamestatus = false;
								that.$store.commit('USERINFO', userinfo);
							}
							that.$router.go(-1);
						} else {
							that.$toast('用户信息不存在');
						}
					} else {
						that.$toast(res.data.msg);
					}

				}).catch((err) => {

				})
			}
		},
		components: {
			XInput,
			Group,
			XButton
		},
		computed: mapGetters([
			'userinfo',
		]),
		beforeDestroy() {
			this.$root.eventHub.$off('nicketName')
		},
	}
</script>

<style scoped>
	/* //头像部分 */
	
	.kp-modifyPass {
		background: #f4f5f9;
	}
	
	.kp-mp-box {
		padding-top: 86px;
	}
	
	.kp-mb-li {
		height: 98px;
		margin-top: 32px;
		display: flex;
		padding: 0 30px;
		background: #fff;
		position: relative;
	}
	
	.kp-mb-li input {
		flex: 1;
		border: none;
		font-size: 32px;
		color: rgb(51, 51, 51);
		background: #FFF;
		outline: none;
		margin-right: 30px;
	}
	
	.kp-mb-li input::-ms-input-placeholder {
		color: rgb(203, 203, 203);
	}
	
	.kp-mb-li i {
		position: absolute;
		width: 98px;
		height: 98px;
		right: 30px;
		background: url(../../../assets/reset.png) no-repeat right center;
		background-size: 32px 32px;
		display: inline-block;
		z-index: 9;
	}
	
	input::-webkit-input-placeholder {
		color: rgb(203, 203, 203);
	}
	
	input::-moz-placeholder {
		color: rgb(203, 203, 203);
	}
	
	.kp-mp-box p {
		text-align: right;
		padding: 17px 30px 0;
		font-size: 28px;
		color: rgb(138, 138, 138);
	}
	
	.kp-mp-box p span {
		font-size: 26px;
		color: rgb(245, 31, 31);
		float: left;
	}
</style>